<script setup lang="ts">
import {getConsultAnt} from "@/api/home/index";
import {ref} from "vue";
import { useRouter } from 'vue-router';

const router = useRouter();
const errorHandler = () => true

let consult = {
    pageNum: 1,
    pageSize: 10
}
let url = 'http://192.168.5.120:8090'
let consultArr = ref([])
getConsultAnt(consult).then(res=>{
    consultArr.value = res.rows
})
const jump = (id)=>{
    router.push({path:'/teacherDetail',query:{id:id}})
}
</script>

<template>
    <div class="information" v-for="item in consultArr" :key="item.id" @click="jump(item.id)">
        <el-avatar :size="70" @error="errorHandler">
            <img
                :src="url + item.avatar" alt=""
            />
        </el-avatar>
        <p class="name">{{ item.name }}</p>
        <div class="label">
            <p class="learn pText" v-for="val in item.labels" :key="val.id">
                {{val.label}}
            </p>
        </div>
    </div>
</template>

<style scoped lang='less'>
.information {
    flex: 0 0 auto; /* 不伸缩，保持原始大小 */
    margin-right: 15px; /* 子元素之间的间距 */
    padding: 5% 3%;
    width: 38%;
    height: 50vw;
    border-radius: 5%;
    text-align: center;
    border: 1px solid rgba(23,15,26,0.2);
    .name {
        margin: auto;
        margin-top: 10px;
        margin-bottom: 14%;
        font-size: 20px;
        font-weight: 700;
        width: 98%;
        /* 强制在同一行显示 */
        white-space: nowrap;
        /* 溢出隐藏 */
        overflow: hidden;
        /* 添加省略号 */
        text-overflow: ellipsis;
    }
    .label {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        overflow: hidden;
        .pText {
            margin: 3% 0;
            min-width: 40%;
            min-height: 5vw;
            line-height: 5vw;
            background-color: #F2F9FF;
            color: #1590FB;
            border-radius: 8%;
            font-size: 12px;
        }
    }
}
 /* 最后一个子元素不需要右边距 */
.information:last-child {
    margin-right: 0;
}
</style>